<template>
  <div class="main">
    <div v-if="page == 0">
      <introduce :title="title" :time="time" :desc="desc" @nextPage="nextPage" />
    </div>

    <div v-else class="assess">
      <div class="bg">
        <el-image :src="require('./../../../assets/buying.png')"></el-image>
      </div>
      <div class="out-box">
        <div class="left-person">
          <div class="person-main">
            <div class="box">
              <div class="avatar">
                <el-avatar :src="avatar1"></el-avatar>
              </div>
              <div class="info">
                <div class="name">玩家:自己</div>
                <div class="return">总收益:{{ total1 }}</div>
              </div>
            </div>
            <div class="revenue-list">
              <div class="title">详细收益：</div>
              <div class="list">
                <div v-for="item in pydata1" :key="item">{{ item }}</div>
              </div>
            </div>
          </div>
          <div class="person-main">
            <div class="box">
              <div class="avatar">
                <el-avatar :src="avatar2"></el-avatar>
              </div>
              <div class="info">
                <div class="name">玩家:对手</div>
                <div class="return">总收益:{{ total2 }}</div>
              </div>
            </div>
            <div class="revenue-list">
              <div class="title">详细收益：</div>
              <div class="list">
                <div v-for="item in pydata2" :key="item">{{ item }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="right-product">
          <div style="font-size: 1.4em; font-weight: bold">商品列表</div>
          <div class="product-list">
            <div v-for="(item, i) in productList" :key="i" class="product"
              :class="[currentProduct == i ? 'active-product' : '']">
              <el-avatar :src="producturl"></el-avatar>
              {{ i + 1 }}
            </div>
          </div>
          <div style="font-size: 1.4em; font-weight: bold">请选择你的价格</div>
          <div class="get-price">
            <div @click="choosePrice(i)" v-for="(item, i) in priceList" :key="i" class="price"
              :class="[activeprice == i ? 'active-price' : '']">
              ￥{{ item }}
            </div>
          </div>
          <div>
            <el-button type="text" size="mini" @click="confimPrice">确定</el-button>
          </div>
          <div class="result">
            你的最终收益为<span style="padding:0 5px;color:red;font-size:1.8em">{{ total1 }}</span>
          </div>
        </div>
      </div>
    </div>

    <el-button v-if="currentProduct == 5" style="margin-top:20px;" size="mini" @click="nextAss()">结束,下一项</el-button>
  </div>
</template>

<script>
import introduce from "./../com/introduce.vue";
import { AdventureCalc } from './../../../api/access';
export default {
  data: function () {
    return {
      page: 0,
      title: '交易投资',
      desc: '在本游戏中，您与机器人交易对手共同售卖相同产品<br/>系统将会选择标价更低的进行买卖，同时较低售价您所获得的利润也会更低<br/>在5轮中，将根据您的最终收益进行评判',

      avatar1: require('./../../../assets/avatar-m.png'),
      avatar2: require('./../../../assets/avatar-man.png'),
      producturl: require("./../../../assets/product.png"),
      pydata1: [0, 0, 0, 0, 0],
      pydata2: [0, 0, 0, 0, 0],
      total1: 0,
      total2: 0,
      productList: [1, 2, 3, 4, 5],
      priceList: [50, 100, 200, 300],
      currentProduct: 0,
      activeprice: 0,
    };
  },
  components: {
    introduce
  },
  methods: {
    nextPage: function () {
      this.page = 1;
    },

    choosePrice: function (ix) {
      this.activeprice = ix;
    },
    confimPrice: function () {
      if (this.currentProduct <= 4) {
        let price_machine = this.priceList[Math.floor((Math.random() * 4))];
        if (price_machine == this.priceList[this.activeprice]) {
          this.pydata1[this.currentProduct] = price_machine / 2;
          this.pydata2[this.currentProduct] = price_machine / 2;
          this.total1 += this.pydata1[this.currentProduct];
          this.total2 += this.pydata2[this.currentProduct];
          this.$message(`与对手均分${price_machine / 2} ￥`);
        } else if (price_machine < this.priceList[this.activeprice]) {
          this.pydata2[this.currentProduct] = price_machine;
          this.total2 += this.pydata2[this.currentProduct];
          this.$message.error(`本轮交易对手获得${this.pydata2[this.currentProduct]} ￥`);
        } else if (price_machine > this.priceList[this.activeprice]) {
          this.pydata1[this.currentProduct] = this.priceList[this.activeprice];
          this.total1 += this.pydata1[this.currentProduct];
          this.$message.success(`本轮您获得${this.pydata1[this.currentProduct]} ￥`);
        }
        this.currentProduct += 1;
      }
      if (this.currentProduct == 5) {
        this.$message('测评完成');
      }
    },
    nextAss: function () {
      console.log('finish');
      AdventureCalc({
        uid: this.$store.state.User.uid,
        score: this.total1
      }).then(res => {
        if (res.rescode == 200) {
          this.$emit("nextAss");
        }
      })
    }
  }
};
</script>

<style lang="less"  scoped>
.main {
  padding-top: 20px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: relative;

  .bg {
    position: absolute;
    top: 60px;
    left: 20px;
    width: 300px;
    z-index: -1;
  }
}

.out-box {
  border: 3px solid #b9c6ff;
  border-radius: 30px;
  width: 60%;
  height: 400px;
  margin: 0 auto;
  padding: 10px 0;
  display: flex;
  align-content: center;
  justify-content: center;
  z-index: 100;
}

.left-person {
  width: 30%;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  padding: 0 10px;
}

.right-product {
  width: 60%;
  border: 3px solid #b9c6ff;
  border-radius: 30px;
  height: 98%;

  .product-list {
    display: flex;
    width: 100%;
    padding: 5%;
    box-sizing: border-box;
    align-content: space-between;
    justify-content: space-between;

    .product {
      width: 50px;
      height: 65px;
      border-radius: 3px;
      background: #c0c4cc;
    }
  }
}

.get-price {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0 40px;
  box-sizing: border-box;
  cursor: pointer;

  .price {
    width: 80px;
    // height: 50px;
    margin: 10px 30px;
    border-radius: 3px;
    text-align: center;
    padding: 8px;
    justify-content: center;
    display: flex;
    align-items: center;
    font-size: 1.4em;
    border: 2px solid #f2463e;
    // color: #fff;
  }
}

.result {
  margin-top: 10px;
  font-size: 1.3em;
}

.active-product {
  box-shadow: 6px 6px 16px #676869;
}

.active-price {
  box-shadow: 6px 6px 10px #f2463e;
  border: 4px solid #f2463e;
  background: #f2463e;
  color: #fff;
}

.person-main {
  margin: 5px;
  box-sizing: border-box;
  padding: 5px;
  border: 3px solid #b9c6ff;
  border-radius: 15px;

  .box {
    display: flex;
    width: 170px;
    height: 82px;
    display: flex;
    align-content: center;
    justify-content: center;

    .avatar {
      height: 100%;
      display: flex;
      align-items: center;
    }

    .info {
      width: 60%;

      .name,
      .return {
        font-size: 1.3em;
        font-weight: bold;
        line-height: 2em;
      }
    }
  }

  .revenue-list {
    width: 100%;
    font-weight: bold;

    .list {
      display: flex;
      width: 100%;
      justify-content: center;

      div {
        padding: 8px;
      }
    }
  }
}
</style>